<template>
  <div class="home-container">
    <!-- 添加 Font Awesome CDN -->
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- 顶部导航栏 -->
    <nav class="nav-bar">
      <div class="nav-content">
        <div class="logo">
          <img src="../assets/images/logo.png" alt="联通" class="logo-img">
          <span class="logo-text">联通5G</span>
        </div>
        <div class="nav-links">
          <a href="javascript:void(0)" class="nav-link active" @click="showDevTip">首页</a>
          <a href="javascript:void(0)" class="nav-link" @click="showDevTip">套餐</a>
          <a href="javascript:void(0)" class="nav-link" @click="showDevTip">服务</a>
          <a href="javascript:void(0)" class="nav-link" @click="showDevTip">帮助</a>
        </div>
      </div>
    </nav>

    <!-- 顶部banner -->
    <div class="banner">
      <div class="banner-content">
        <div class="banner-text">
          <h1>5G时代 联通未来</h1>
          <p>更快、更稳、更智能的5G网络体验</p>
          <button class="banner-btn" @click="showDevTip">立即体验</button>
        </div>
        <img src="../assets/images/banner.jpg" alt="联通5G" class="banner-img">
      </div>
    </div>

    <!-- 特色服务 -->
    <div class="features-section">
      <div class="feature-card">
        <i class="fa fa-wifi"></i>
        <h3>5G网络</h3>
        <p>超高速网络体验</p>
      </div>
      <div class="feature-card">
        <i class="fa fa-globe"></i>
        <h3>全国覆盖</h3>
        <p>信号稳定无死角</p>
      </div>
      <div class="feature-card">
        <i class="fa fa-comments-o"></i>
        <h3>优质服务</h3>
        <p>7*24小时在线</p>
      </div>
    </div>

    <!-- 套餐选择区域 -->
    <div class="plans-section">
      <div class="section-header">
        <h2 class="section-title">热门套餐</h2>
        <div class="section-tabs">
          <button 
            class="tab-btn" 
            :class="{ active: currentTab === '5G套餐' }"
            @click="switchTab('5G套餐')"
          >5G套餐</button>
          <button 
            class="tab-btn" 
            :class="{ active: currentTab === '4G套餐' }"
            @click="switchTab('4G套餐')"
          >4G套餐</button>
          <button 
            class="tab-btn" 
            :class="{ active: currentTab === '流量包' }"
            @click="switchTab('流量包')"
          >流量包</button>
        </div>
      </div>
      <div class="plans-grid">
        <div v-for="plan in currentPlans" :key="plan.id" class="plan-card" @click="selectPlan(plan)">
          <div class="plan-tag" v-if="plan.isHot">热门</div>
          <div class="plan-header">
            <h3>{{ plan.name }}</h3>
            <div class="price">
              <span class="price-value">¥{{ plan.price }}</span>
              <span class="price-unit">/月</span>
            </div>
          </div>
          <div class="plan-details">
            <div class="detail-item">
              <i class="fa fa-database"></i>
              <span>{{ plan.data }}GB流量</span>
            </div>
            <div class="detail-item">
              <i class="fa fa-phone"></i>
              <span>{{ plan.minutes }}分钟通话</span>
            </div>
            <div class="detail-item">
              <i class="fa fa-comment"></i>
              <span>{{ plan.sms }}条短信</span>
            </div>
            <div class="detail-item" v-if="plan.benefits">
              <i class="fa fa-gift"></i>
              <span>{{ plan.benefits }}</span>
            </div>
          </div>
          <button class="select-btn" @click="showDevTip">立即办理</button>
        </div>
      </div>
    </div>

    <!-- 办理流程 -->
    <div class="process-section">
      <h2 class="section-title">办理流程</h2>
      <div class="process-steps">
        <div class="step">
          <div class="step-icon">1</div>
          <div class="step-text">选择套餐</div>
          <div class="step-desc">选择适合您的套餐</div>
        </div>
        <div class="step-arrow"></div>
        <div class="step">
          <div class="step-icon">2</div>
          <div class="step-text">填写信息</div>
          <div class="step-desc">填写个人基本信息</div>
        </div>
        <div class="step-arrow"></div>
        <div class="step">
          <div class="step-icon">3</div>
          <div class="step-text">在线支付</div>
          <div class="step-desc">安全便捷的支付方式</div>
        </div>
        <div class="step-arrow"></div>
        <div class="step">
          <div class="step-icon">4</div>
          <div class="step-text">等待发货</div>
          <div class="step-desc">快速配送上门</div>
        </div>
      </div>
    </div>

    <!-- 用户评价 -->
    <div class="reviews-section">
      <h2 class="section-title">用户评价</h2>
      <div class="reviews-grid">
        <div class="review-card">
          <div class="review-header">
            <img src="../assets/images/avatar1.jpg" alt="用户头像" class="review-avatar">
            <div class="review-info">
              <div class="review-name">张先生</div>
              <div class="review-rating">★★★★★</div>
            </div>
          </div>
          <p class="review-content">5G网速真的很快，套餐也很实惠，客服态度很好！</p>
        </div>
        <div class="review-card">
          <div class="review-header">
            <img src="../assets/images/avatar2.jpg" alt="用户头像" class="review-avatar">
            <div class="review-info">
              <div class="review-name">李女士</div>
              <div class="review-rating">★★★★★</div>
            </div>
          </div>
          <p class="review-content">办理流程很顺畅，信号覆盖也很广，很满意！</p>
        </div>
      </div>
    </div>

    <!-- 底部信息 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <h4>关于我们</h4>
          <a href="#">公司简介</a>
          <a href="#">新闻中心</a>
          <a href="#">招贤纳士</a>
        </div>
        <div class="footer-section">
          <h4>客户服务</h4>
          <a href="#">帮助中心</a>
          <a href="#">常见问题</a>
          <a href="#">投诉建议</a>
        </div>
        <div class="footer-section">
          <h4>联系我们</h4>
          <p>客服热线：10010</p>
          <p>服务时间：7*24小时</p>
        </div>
      </div>
      <div class="footer-bottom">
        <p>© 2024 中国联通 版权所有</p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import '../assets/styles/home.css'

interface Plan {
  id: number
  name: string
  price: number
  data: number
  minutes: number
  sms: number
  isHot?: boolean
  benefits?: string
}

const plans = ref<Plan[]>([
  {
    id: 1,
    name: '5G畅享套餐',
    price: 99,
    data: 100,
    minutes: 1000,
    sms: 100,
    isHot: true,
    benefits: '赠送视频会员'
  },
  {
    id: 2,
    name: '5G尊享套餐',
    price: 199,
    data: 200,
    minutes: 2000,
    sms: 200,
    benefits: '赠送云存储空间'
  },
  {
    id: 3,
    name: '5G至尊套餐',
    price: 299,
    data: 300,
    minutes: 3000,
    sms: 300,
    isHot: true,
    benefits: '赠送智能音箱'
  }
])

const fourGPlans = ref<Plan[]>([
  {
    id: 4,
    name: '4G畅享套餐',
    price: 59,
    data: 50,
    minutes: 500,
    sms: 50,
    isHot: true,
    benefits: '赠送音乐会员'
  },
  {
    id: 5,
    name: '4G尊享套餐',
    price: 99,
    data: 100,
    minutes: 1000,
    sms: 100,
    benefits: '赠送云存储空间'
  },
  {
    id: 6,
    name: '4G至尊套餐',
    price: 159,
    data: 150,
    minutes: 1500,
    sms: 150,
    isHot: true,
    benefits: '赠送智能手表'
  }
])

const dataPackages = ref<Plan[]>([
  {
    id: 7,
    name: '流量加油包',
    price: 30,
    data: 20,
    minutes: 0,
    sms: 0,
    isHot: true,
    benefits: '当月有效'
  },
  {
    id: 8,
    name: '流量畅享包',
    price: 50,
    data: 40,
    minutes: 0,
    sms: 0,
    benefits: '当月有效'
  },
  {
    id: 9,
    name: '流量至尊包',
    price: 80,
    data: 80,
    minutes: 0,
    sms: 0,
    isHot: true,
    benefits: '当月有效'
  }
])

const currentTab = ref<string>('5G套餐')
const currentPlans = ref<Plan[]>(plans.value)

const switchTab = (tab: string) => {
  currentTab.value = tab
  switch (tab) {
    case '5G套餐':
      currentPlans.value = plans.value
      break
    case '4G套餐':
      currentPlans.value = fourGPlans.value
      break
    case '流量包':
      currentPlans.value = dataPackages.value
      break
  }
}

const selectPlan = (plan: Plan) => {
  // TODO: 实现套餐选择逻辑
  console.log('选择套餐:', plan)
}

const showDevTip = () => {
  alert('功能开发中，敬请期待！')
}
</script> 